<html>
    
    <head>
        <meta charset="utf-8">
        <title>HTML5 Audio How To Use</title>
        <script>
        
            // 音データへのパス
            var SOUND_PATH = "./sound/";
            
            // サポートされているファイル形式を取得
            var AUDIO_EXT = (function(){
                var audio = new Audio();
                var ext = "";
                if      (audio.canPlayType("audio/ogg") == 'maybe') { ext="ogg"; }
                else if (audio.canPlayType("audio/mp3") == 'maybe') { ext="mp3"; }
                else if (audio.canPlayType("audio/wav") == 'maybe') { ext="wav"; }
                
                return ext;
            })();
            
            // 確認
            alert( "このブラウザがサポートしている拡張子は '" + AUDIO_EXT + "'です." );
            
            // 再生
            var play = function(element) {
                // ファイル名を取得
                var name = element.getAttribute("name");
                // パス + ファイル名 + サポートしている拡張子
                var file_path = SOUND_PATH + name + '.' + AUDIO_EXT;
                // Audio エレメントを生成
                var audio = new Audio(file_path);
                // 再生
                audio.play();
            };
            
        </script>
    </head>
    
    <body>
        
        <h1>HTML5 Audio How To Use</h1>
        
        <button name="C3" onclick="play(this);">ド</button>
        <button name="D3" onclick="play(this);">レ</button>
        <button name="E3" onclick="play(this);">ミ</button>
        
    </body>

</html>
